<template>
    <div class="singer">
        <div v-for="item in props.singerList" class="singerItem">
            <div class="singerLeft">
                <div>
                    <img :src="item.picUrl" alt="" class="picimg">
                </div>
                <div class="singerCenter">
                    {{ item.name }}
                </div>
            </div>
            <div>
                <van-button class="singerRight" color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini" round>
                    + 关注
                </van-button>
            </div>
        </div>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
const props = defineProps(['singerList'])

</script>
 
<style lang = "less" scoped>
.singer {
    .singerItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.2rem;

        .picimg {
            height: 1rem;
            width: 1rem;
            border-radius: 50%;
        }

        .singerLeft {
            display: flex;
            align-items: center;
        }

        .singerCenter {
            margin-left: 0.2rem;
        }

        .singerRight {
            padding: 0 0.3rem;
        }
    }

}
</style>